import React, {Component,lazy,Suspense} from 'react';
import {Link,Route} from "react-router-dom";
import "./Redux.css"
const One=lazy(()=>import('./ReduxOne/ReduxOne'))
const Two=lazy(()=>import('./ReduxTwo/ReduxTwo'))

class Redux extends Component {
    render() {
        return (
            <div className={'root-one'}>
            <h1>这是Redux</h1>
            <div className={"root"}>

<div className={"left"}>
    <p><Link to={'/redux/ReactOne'}>One</Link> </p>
    <p> <Link to={"/redux/ReactTwo"}>Two</Link></p>

</div>
                <div className={"right"}>
                    <Suspense fallback={null}>
                        <Route path={"/redux/ReactOne"} component={One}/>
                        <Route path={"/redux/ReactTwo"} component={Two}/>
                    </Suspense>

                </div>
            </div>
            </div>
        );
    }
}

export default Redux;
/*
Redux的核心概念
1,Action
本质上是一个JavaScript对象,作用是把数据传递给store,用户调用dispatch方法的时候传入action对象,每个action对象都必须
有一个type字段,表示将要执行的动作,type字段一般定义成字符串常量
2,Reducer
本质是一个纯函数(函数的执行结果只会受其形参的影响,初次之外)
3,store
store本质是一个对象,就是吧actions和reducer联系在一起,store有以下几个职责:
1,提供 getState() 方法获取 state；
2,提供 dispatch(action) 方法更新 state；
3,通过 subscribe(listener) 注册监听器;
4,通过 subscribe(listener) 返回的函数注销监听器。
* */